<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度一下，你就知道</title>
    <style>
        *{
            margin: 0;padding: 0;
        }
        .big{
            margin: 8px;
            width: 100%;
            height: 100%;
        }
        .top{
            width: 100%;
            height: 50px;
        }
        .ulTopLeft{
            font-size: 13px;
            list-style-type: none;
            float: left;
        }
        .uTL{
            float: left;
            padding: 15px;
        }
        .uTL:hover{
            color:blue;
            cursor: pointer;
        }

        .ulTopRight{
            font-size: 13px;
            list-style-type: none;
            float: right;
        }
        .uTR{
            float: left;
            padding: 15px;
        }
        .uTR:hover{
            color:blue;
            cursor: pointer;
        }
        .div001{
        width: 50px;
        height: 25px;
        border-radius: 8px;
        color: white; 
        background-color: blue;
        text-align: center;
        }
        .mid1{
            position: relative;
            width: 230px;
            height: 150px;
            margin: 30px auto;
        }
        img:hover{
            cursor: pointer;
        }
        .mid2{
            width: 500px;
            height: 100px;
            margin: 20px auto;
        }
        .bottom{
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 15px;
            margin: 0 5px 5px 5px;
        }
        .ulBottomLeft{
            float: left;
            color: grey;
            list-style-type: none;
            font-size: 10px;
        }
        .ulBottomRight{
            float: right;
            color: grey;
            list-style-type: none;
            font-size: 10px;
        }
        .uBL{
            float: left;
            padding: 10px;
        }
        .uBR{
            float: left;
            padding: 10px;
        }
        .uBR0{
            float: left;
            padding: 10px;
        }
        .uBL:hover{
            color: black;
            cursor: pointer;

        }
        .uBR:hover{
            color: black;
            cursor: pointer;

        }
    </style>
</head>
<body>
    <div class="big">
        <div class="top" >
            <ul class="ulTopLeft">
                <li class="uTL">新闻</li>
                <li class="uTL">hao123</li>
                <li class="uTL">地图</li>
                <li class="uTL">视频</li>
                <li class="uTL">贴吧</li>
                <li class="uTL">学术</li>
                <li class="uTL">更多</li>
            </ul>
            <ul class="ulTopRight">
                <li class="uTR">设置</li>
                <li class="uTR">
                    <div class="div001">登录</div>
                </li>
            </ul>
        </div>

        <div class="mid1">
            <img src="百度图标.jpg" alt="baidu" width="230px" height="80px">
            <textarea name="search" id="" cols="30" rows="3"></textarea>
        </div>

        <div class="mid2">
            <h4>百度热榜</h4>
        </div>

        <div class="bottom">
            <ul class="ulBottomLeft">
                <li class="uBL">设为首页</li>
                <li class="uBL">关于百度</li>
                <li class="uBL">About Baidu</li>
                <li class="uBL">百度营销</li>
                <li class="uBL">使用百度前必读</li>
                <li class="uBL">意见反馈</li>
                <li class="uBL">帮助中心</li>
            </ul>
            <ul class="ulBottomRight">
                <li class="uBR0">&copy;2021 Baidu</li>
                <li class="uBR0">(京)-经营性-2017-2020</li>
                <li class="uBR">京公网安备11000002000001号</li>
                <li class="uBR">京ICP证030173号</li>
            </ul>
        </div>
    </div>
</body>
</html>